<div style="margin-bottom: 10px;">
    <button id="createTaskBtn" class="layui-btn layui-btn-normal">创建任务</button>
</div>

<script>
    function createTaskFunc(table, form, layer, laydate, $) {
        // 创建任务弹窗
        $('#createTaskBtn').on('click', function () {
            // 创建表单HTML - 添加lay-filter属性以便正确获取表单数据
            var formHtml = `
            <form class="layui-form" style="padding: 20px;" lay-filter="taskForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">任务名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入任务名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">任务描述</label>
                    <div class="layui-input-block">
                        <textarea name="description" required lay-verify="required" placeholder="请输入任务描述" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">任务状态</label>
                    <div class="layui-input-block">
                        <select name="status" required lay-verify="required">
                            <option value="1">未开始</option>
                            <option value="2">进行中</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">任务积分</label>
                    <div class="layui-input-block">
                        <input type="number" name="points" required lay-verify="required|number" placeholder="请输入任务积分" class="layui-input" min="0">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="start_time" required lay-verify="required" placeholder="YYYY-MM-DD HH:mm:ss" class="layui-input" id="startTime">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="end_time" required lay-verify="required" placeholder="YYYY-MM-DD HH:mm:ss" class="layui-input" id="endTime">
                    </div>
                </div>
            </form>
            `;

            // 打开弹窗
            var index = layer.open({
                type: 1,
                title: '创建新任务',
                content: formHtml,
                area: ['600px', 'auto'],
                btn: ['提交', '取消', '通过ID导入'],
                btn3Align: 'c',
                success: function (layero) {
                    // 刷新表单渲染
                    form.render();

                    // 初始化日期时间选择器
                    laydate.render({
                        elem: '#startTime',
                        type: 'datetime',
                        format: 'yyyy-MM-dd HH:mm:ss',
                        min: 0, // 最小日期为当前时间
                        trigger: 'click'
                    });

                    laydate.render({
                        elem: '#endTime',
                        type: 'datetime',
                        format: 'yyyy-MM-dd HH:mm:ss',
                        min: 0, // 最小日期为当前时间
                        trigger: 'click'
                    });
                },
                
                // 通过ID导入任务
                btn3: function(index) {
                    layer.prompt({
                        formType: 3,
                        title: '请输入要导入的任务ID',
                        placeholder: '任务ID'
                    }, function(taskId, promptIndex) {
                        // 关闭输入框弹窗
                        layer.close(promptIndex);
                        
                        if (!taskId || taskId.trim() === '') {
                            layer.msg('请输入有效的任务ID', {icon: 5});
                            return;
                        }
                        
                        // 显示加载中
                        var loadingIndex = layer.load(2, {
                            shade: [0.3, '#393D49']
                        });
                        
                        // 调用获取单个任务接口
                        axios.get('/api/task/get_task/', {
                            params: {
                                tid: taskId.trim()
                            }
                        }).then(function(res) {
                            layer.close(loadingIndex);
                            res = res.data;
                            console.log('获取任务详情结果:', res);
                            
                            if (res.code === 0 && res.data) {
                                var taskData = res.data;
                                
                                // 填充表单数据
                                form.val('taskForm', {
                                    'name': taskData.name,
                                    'description': taskData.description,
                                    'status': taskData.status.toString(),
                                    'points': taskData.points,
                                    'start_time': taskData.start_time,
                                    'end_time': taskData.end_time
                                });
                                
                                layer.msg('任务数据导入成功', {icon: 6});
                            } else {
                                layer.msg(res.message || '任务数据获取失败', {icon: 5});
                            }
                        }).catch(function(error) {
                            layer.close(loadingIndex);
                            console.error('获取任务详情失败:', error);
                            layer.msg('网络错误，请稍后重试', {icon: 5});
                        });
                    });
                    
                    // 返回false阻止模态框关闭
                    return false;
                },
                yes: function (index) {
                    // 使用正确的lay-filter获取表单数据
                    var formData = form.val('taskForm');

                    // 添加调试日志，查看表单数据获取情况
                    console.log('表单数据:', formData);

                    // 表单验证
                    var isError = false;
                    if (!formData.name) {
                        layer.msg('请输入任务名称', { icon: 5 });
                        isError = true;
                    } else if (!formData.description) {
                        layer.msg('请输入任务描述', { icon: 5 });
                        isError = true;
                    } else if (!formData.status) {
                        layer.msg('请选择任务状态', { icon: 5 });
                        isError = true;
                    } else if (!formData.points || formData.points < 0) {
                        layer.msg('请输入有效的积分值', { icon: 5 });
                        isError = true;
                    } else if (!formData.start_time) {
                        layer.msg('请输入开始时间', { icon: 5 });
                        isError = true;
                    } else if (!formData.end_time) {
                        layer.msg('请输入结束时间', { icon: 5 });
                        isError = true;
                    } else if (new Date(formData.start_time) >= new Date(formData.end_time)) {
                        layer.msg('结束时间必须晚于开始时间', { icon: 5 });
                        isError = true;
                    }

                    if (isError) return;

                    // 调用创建任务API，使用axios
                    axios({
                        url: '/api/task/create_task/',
                        method: 'POST',
                        data: formData,
                    }).then(function (res) {
                        res = res.data;
                        console.log('API返回结果:', res);
                        if (res.code === 0) {
                            layer.msg('任务创建成功', { icon: 6 });
                            layer.close(index);
                            // 刷新表格
                            table.reload('Index-ID-table-demo-page');
                        } else {
                            layer.msg(res.message || '任务创建失败', { icon: 5 });
                        }
                    }).catch(function (error) {
                        console.error('API请求失败:', error);
                        layer.msg('网络错误，请稍后重试', { icon: 5 });
                    });
                }
            });
        });

    }
</script>